<!DOCTYPE html>
<html>
<!--
Copyright 2010 The Closure Library Authors. All Rights Reserved.

Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<!--
-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Closure Unit Tests - goog.ui.ac.Renderer</title>
<style type="text/css">
#viewport {
  width: 400px;
  height: 200px;
  overflow: hidden; /* Suppress scroll bars to get consistent cross-browser resizing */
  position: relative;
}
</style>
<script src="../../base.js"></script>
<script>
  goog.require('goog.dom');
  goog.require('goog.dom.classlist');
  goog.require('goog.a11y.aria');
  goog.require('goog.a11y.aria.Role');
  goog.require('goog.a11y.aria.State');
  goog.require('goog.events');
  goog.require('goog.functions');
  goog.require('goog.fx.dom.FadeInAndShow');
  goog.require('goog.fx.dom.FadeOutAndHide');
  goog.require('goog.string');
  goog.require('goog.style');
  goog.require('goog.testing.PropertyReplacer');
  goog.require('goog.testing.events');
  goog.require('goog.testing.jsunit');
  goog.require('goog.ui.ac.AutoComplete');
  goog.require('goog.ui.ac.Renderer');
</script>
</head>
<body>
<div id="someElement">Click target</div>
<div id="target">Target</div>
<div id="viewport">
  Parent (viewport) element for some tests
  <div id="viewportTarget">Target for viewport tests</div>
</div>
<script>
  var renderer;
  var rendRows = [];
  var someElement = goog.dom.getElement('someElement');
  var target = goog.dom.getElement('target');
  var viewport = goog.dom.getElement('viewport');
  var viewportTarget = goog.dom.getElement('viewportTarget');
  var propertyReplacer = new goog.testing.PropertyReplacer();


  // One-time set up of rows formatted for the renderer.
  var rows = [
    'Amanda Annie Anderson',
    'Frankie Manning',
    'Louis D Armstrong',
    // NOTE(user): sorry about this test input, but it has caused problems
    // in the past, so I want to make sure to test against it.
    'Foo Bar................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................'
  ];
  for (var i = 0; i < rows.length; i++) {
    rendRows.push({
      id: i,
      data: rows[i]
    });
  }

  function setUp() {
    renderer = new goog.ui.ac.Renderer();
    renderer.rowDivs_ = [];
    renderer.target_ = target;
  }

  function tearDown() {
    renderer.dispose();
    propertyReplacer.reset();
  }

  function testBasicStringTokenHighlightingUsingUniversalMatching() {
    var row = rendRows[0];  // 'Amanda Annie Anderson'
    renderer.setMatchWordBoundary(false);

    // Should highlight first match only.
    var token = 'A';
    var node = renderer.renderRowHtml(row, token);
    var boldTagElArray = node.getElementsByTagName('b');
    assertNumBoldTags(boldTagElArray, 1);
    assertPreviousNodeText(boldTagElArray[0], '');
    assertHighlightedText(boldTagElArray[0], 'A');
    assertLastNodeText(node, 'manda Annie Anderson');

    // Match should be case insensitive, and should match tokens in the
    // middle of words if useWordMatching is turned off ("an" in Amanda).
    var token = 'an';
    var node = renderer.renderRowHtml(row, token);
    var boldTagElArray = node.getElementsByTagName('b');
    assertNumBoldTags(boldTagElArray, 1);
    assertPreviousNodeText(boldTagElArray[0], 'Am');
    assertHighlightedText(boldTagElArray[0], 'an');
    assertLastNodeText(node, 'da Annie Anderson');

    // Should only match on non-empty strings.
    token = '';
    node = renderer.renderRowHtml(row, token);
    boldTagElArray = node.getElementsByTagName('b');
    assertNumBoldTags(boldTagElArray, 0);
    assertLastNodeText(node, 'Amanda Annie Anderson');

    // Should not match leading whitespace.
    token = ' an';
    node = renderer.renderRowHtml(row, token);
    boldTagElArray = node.getElementsByTagName('b');
    assertNumBoldTags(boldTagElArray, 0);
    assertLastNodeText(node, 'Amanda Annie Anderson');
  }

  function testBasicStringTokenHighlighting() {
    var row = rendRows[0];  // 'Amanda Annie Anderson'

    // Should highlight first match only.
    var token = 'A';
    var node = renderer.renderRowHtml(row, token);
    var boldTagElArray = node.getElementsByTagName('b');
    assertNumBoldTags(boldTagElArray, 1);
    assertPreviousNodeText(boldTagElArray[0], '');
    assertHighlightedText(boldTagElArray[0], 'A');
    assertLastNodeText(node, 'manda Annie Anderson');

    // Should only match on non-empty strings.
    token = '';
    node = renderer.renderRowHtml(row, token);
    boldTagElArray = node.getElementsByTagName('b');
    assertNumBoldTags(boldTagElArray, 0);
    assertLastNodeText(node, 'Amanda Annie Anderson');

    // Match should be case insensitive, and should not match tokens in the
    // middle of words ("an" in Amanda).
    token = 'an';
    node = renderer.renderRowHtml(row, token);
    boldTagElArray = node.getElementsByTagName('b');
    assertNumBoldTags(boldTagElArray, 1);
    assertPreviousNodeText(boldTagElArray[0], 'Amanda ');
    assertHighlightedText(boldTagElArray[0], 'An');
    assertLastNodeText(node, 'nie Anderson');

    // Should not match whitespace.
    token = ' ';
    node = renderer.renderRowHtml(row, token);
    boldTagElArray = node.getElementsByTagName('b');
    assertNumBoldTags(boldTagElArray, 0);
    assertLastNodeText(node, 'Amanda Annie Anderson');

    // Should not match leading whitespace since all matches are at the start of
    // word boundaries.
    token = ' an';
    node = renderer.renderRowHtml(row, token);
    boldTagElArray = node.getElementsByTagName('b');
    assertNumBoldTags(boldTagElArray, 0);
    assertLastNodeText(node, 'Amanda Annie Anderson');

    // Should match trailing whitespace.
    token = 'annie ';
    node = renderer.renderRowHtml(row, token);
    boldTagElArray = node.getElementsByTagName('b');
    assertNumBoldTags(boldTagElArray, 1);
    assertPreviousNodeText(boldTagElArray[0], 'Amanda ');
    assertHighlightedText(boldTagElArray[0], 'Annie ');
    assertLastNodeText(node, 'Anderson');

    // Should match across whitespace.
    row = rendRows[2]; // 'Louis D Armstrong'
    token = 'd a';
    node = renderer.renderRowHtml(row, token);
    boldTagElArray = node.getElementsByTagName('b');
    assertNumBoldTags(boldTagElArray, 1);
    assertPreviousNodeText(boldTagElArray[0], 'Louis ');
    assertHighlightedText(boldTagElArray[0], 'D A');
    assertLastNodeText(node, 'rmstrong');

    // Should match the last token.
    token = 'aRmStRoNg';
    node = renderer.renderRowHtml(row, token);
    boldTagElArray = node.getElementsByTagName('b');
    assertNumBoldTags(boldTagElArray, 1);
    assertPreviousNodeText(boldTagElArray[0], 'Louis D ');
    assertHighlightedText(boldTagElArray[0], 'Armstrong');
    assertLastNodeText(node, '');
  }

  // The name of this function is fortuitous, in that it gets tested
  // last on FF. The lazy regexp on FF is particularly slow, and causes
  // the test to take a long time, and sometimes time out when run on forge
  // because it triggers the test runner to go back to the event loop...
  function testPathologicalInput() {
    // Should not hang on bizarrely long strings
    var row = rendRows[3]; // pathological row
    var token = 'foo';
    var node = renderer.renderRowHtml(row, token);
    var boldTagElArray = node.getElementsByTagName('b');
    assertNumBoldTags(boldTagElArray, 1);
    assertHighlightedText(boldTagElArray[0], 'Foo');
    assert(goog.string.startsWith(
        boldTagElArray[0].nextSibling.nodeValue, ' Bar...'));
  }

  function testBasicArrayTokenHighlighting() {
    var row = rendRows[1];  // 'Frankie Manning'

    // Only the first match in the array should be highlighted.
    var token = ['f', 'm'];
    var node = renderer.renderRowHtml(row, token);
    var boldTagElArray = node.getElementsByTagName('b');
    assertNumBoldTags(boldTagElArray, 1);
    assertPreviousNodeText(boldTagElArray[0], '');
    assertHighlightedText(boldTagElArray[0], 'F');
    assertLastNodeText(node, 'rankie Manning');

    // Only the first match in the array should be highlighted.
    token = ['m', 'f'];
    node = renderer.renderRowHtml(row, token);
    boldTagElArray = node.getElementsByTagName('b');
    assertNumBoldTags(boldTagElArray, 1);
    assertPreviousNodeText(boldTagElArray[0], 'Frankie ');
    assertHighlightedText(boldTagElArray[0], 'M');
    assertLastNodeText(node, 'anning');

    // Skip tokens that do not match.
    token = ['asdf', 'f'];
    node = renderer.renderRowHtml(row, token);
    boldTagElArray = node.getElementsByTagName('b');
    assertNumBoldTags(boldTagElArray, 1);
    assertPreviousNodeText(boldTagElArray[0], '');
    assertHighlightedText(boldTagElArray[0], 'F');
    assertLastNodeText(node, 'rankie Manning');

    // Highlight nothing if no tokens match.
    token = ['Foo', 'bar', 'baz'];
    node = renderer.renderRowHtml(row, token);
    boldTagElArray = node.getElementsByTagName('b');
    assertNumBoldTags(boldTagElArray, 0);
    assertLastNodeText(node, 'Frankie Manning');

    // Empty array should not match.
    token = [];
    node = renderer.renderRowHtml(row, token);
    boldTagElArray = node.getElementsByTagName('b');
    assertNumBoldTags(boldTagElArray, 0);
    assertLastNodeText(node, 'Frankie Manning');

    // Empty string in array should not match.
    token = [''];
    node = renderer.renderRowHtml(row, token);
    boldTagElArray = node.getElementsByTagName('b');
    assertNumBoldTags(boldTagElArray, 0);
    assertLastNodeText(node, 'Frankie Manning');

    // Whitespace in array should not match.
    token = [' '];
    node = renderer.renderRowHtml(row, token);
    boldTagElArray = node.getElementsByTagName('b');
    assertNumBoldTags(boldTagElArray, 0);
    assertLastNodeText(node, 'Frankie Manning');

    // Whitespace entries in array should not match.
    token = [' ', 'man'];
    node = renderer.renderRowHtml(row, token);
    boldTagElArray = node.getElementsByTagName('b');
    assertNumBoldTags(boldTagElArray, 1);
    assertPreviousNodeText(boldTagElArray[0], 'Frankie ');
    assertHighlightedText(boldTagElArray[0], 'Man');
    assertLastNodeText(node, 'ning');

    // Whitespace in array entry should match as a whole token.
    row = rendRows[2]; // 'Louis D Armstrong'
    token = ['d arm', 'lou'];
    node = renderer.renderRowHtml(row, token);
    boldTagElArray = node.getElementsByTagName('b');
    assertNumBoldTags(boldTagElArray, 1);
    assertPreviousNodeText(boldTagElArray[0], 'Louis ');
    assertHighlightedText(boldTagElArray[0], 'D Arm');
    assertLastNodeText(node, 'strong');
  }

  function testHighlightAllTokensSingleTokenHighlighting() {
    renderer.setHighlightAllTokens(true);
    var row = rendRows[0];  // 'Amanda Annie Anderson'

    // All matches at the start of the word should be highlighted when
    // highlightAllTokens is set.
    var token = 'a';
    var node = renderer.renderRowHtml(row, token);
    var boldTagElArray = node.getElementsByTagName('b');
    assertNumBoldTags(boldTagElArray, 3);
    assertPreviousNodeText(boldTagElArray[0], '');
    assertHighlightedText(boldTagElArray[0], 'A');
    assertPreviousNodeText(boldTagElArray[1], 'manda ');
    assertHighlightedText(boldTagElArray[1], 'A');
    assertPreviousNodeText(boldTagElArray[2], 'nnie ');
    assertHighlightedText(boldTagElArray[2], 'A');
    assertLastNodeText(node, 'nderson');

    // Should not match on empty string.
    token = '';
    node = renderer.renderRowHtml(row, token);
    boldTagElArray = node.getElementsByTagName('b');
    assertNumBoldTags(boldTagElArray, 0);
    assertLastNodeText(node, 'Amanda Annie Anderson');

    // Match should be case insensitive.
    token = 'AN';
    node = renderer.renderRowHtml(row, token);
    boldTagElArray = node.getElementsByTagName('b');
    assertNumBoldTags(boldTagElArray, 2);
    assertPreviousNodeText(boldTagElArray[0], 'Amanda ');
    assertHighlightedText(boldTagElArray[0], 'An');
    assertPreviousNodeText(boldTagElArray[1], 'nie ');
    assertHighlightedText(boldTagElArray[1], 'An');
    assertLastNodeText(node, 'derson');

    // Should not match on whitespace.
    token = ' ';
    node = renderer.renderRowHtml(row, token);
    boldTagElArray = node.getElementsByTagName('b');
    assertNumBoldTags(boldTagElArray, 0);
    assertLastNodeText(node, 'Amanda Annie Anderson');

    // When highlighting all tokens, should match despite leading whitespace.
    token = '  am';
    node = renderer.renderRowHtml(row, token);
    boldTagElArray = node.getElementsByTagName('b');
    assertNumBoldTags(boldTagElArray, 1);
    assertPreviousNodeText(boldTagElArray[0], '');
    assertHighlightedText(boldTagElArray[0], 'Am');
    assertLastNodeText(node, 'anda Annie Anderson');

    // Should match with trailing whitepsace.
    token = 'ann   ';
    node = renderer.renderRowHtml(row, token);
    boldTagElArray = node.getElementsByTagName('b');
    assertNumBoldTags(boldTagElArray, 1);
    assertPreviousNodeText(boldTagElArray[0], 'Amanda ');
    assertHighlightedText(boldTagElArray[0], 'Ann');
    assertLastNodeText(node, 'ie Anderson');
  }

  function testHighlightAllTokensMultipleStringTokenHighlighting() {
    renderer.setHighlightAllTokens(true);
    var row = rendRows[1];  // 'Frankie Manning'

    // Each individual space-separated token should match.
    var token = 'm F';
    var node = renderer.renderRowHtml(row, token);
    var boldTagElArray = node.getElementsByTagName('b');
    assertNumBoldTags(boldTagElArray, 2);
    assertPreviousNodeText(boldTagElArray[0], '');
    assertHighlightedText(boldTagElArray[0], 'F');
    assertPreviousNodeText(boldTagElArray[1], 'rankie ');
    assertHighlightedText(boldTagElArray[1], 'M');
    assertLastNodeText(node, 'anning');
  }

  function testHighlightAllTokensArrayTokenHighlighting() {
    renderer.setHighlightAllTokens(true);
    var row = rendRows[0];  // 'Amanda Annie Anderson'

    // All tokens in the array should match.
    var token = ['AM', 'AN'];
    var node = renderer.renderRowHtml(row, token);
    var boldTagElArray = node.getElementsByTagName('b');
    assertNumBoldTags(boldTagElArray, 3);
    assertPreviousNodeText(boldTagElArray[0], '');
    assertHighlightedText(boldTagElArray[0], 'Am');
    assertPreviousNodeText(boldTagElArray[1], 'anda ');
    assertHighlightedText(boldTagElArray[1], 'An');
    assertPreviousNodeText(boldTagElArray[2], 'nie ');
    assertHighlightedText(boldTagElArray[2], 'An');
    assertLastNodeText(node, 'derson');

    // Empty array should not match.
    token = [];
    node = renderer.renderRowHtml(row, token);
    boldTagElArray = node.getElementsByTagName('b');
    assertNumBoldTags(boldTagElArray, 0);
    assertLastNodeText(node, 'Amanda Annie Anderson');

    // Empty string in array should not match.
    token = [''];
    node = renderer.renderRowHtml(row, token);
    boldTagElArray = node.getElementsByTagName('b');
    assertNumBoldTags(boldTagElArray, 0);
    assertLastNodeText(node, 'Amanda Annie Anderson');

    // Whitespace in array should not match.
    token = [' '];
    node = renderer.renderRowHtml(row, token);
    boldTagElArray = node.getElementsByTagName('b');
    assertNumBoldTags(boldTagElArray, 0);
    assertLastNodeText(node, 'Amanda Annie Anderson');

    // Empty string entries in array should not match.
    token = ['', 'Ann'];
    node = renderer.renderRowHtml(row, token);
    boldTagElArray = node.getElementsByTagName('b');
    assertNumBoldTags(boldTagElArray, 1);
    assertPreviousNodeText(boldTagElArray[0], 'Amanda ');
    assertHighlightedText(boldTagElArray[0], 'Ann');
    assertLastNodeText(node, 'ie Anderson');

    // Whitespace entries in array should not match.
    token = [' ', 'And'];
    node = renderer.renderRowHtml(row, token);
    boldTagElArray = node.getElementsByTagName('b');
    assertNumBoldTags(boldTagElArray, 1);
    assertPreviousNodeText(boldTagElArray[0], 'Amanda Annie ');
    assertHighlightedText(boldTagElArray[0], 'And');
    assertLastNodeText(node, 'erson');

    // Whitespace in array entry should match as a whole token.
    token = ['annie a', 'Am'];
    node = renderer.renderRowHtml(row, token);
    var boldTagElArray = node.getElementsByTagName('b');
    assertNumBoldTags(boldTagElArray, 2);
    assertPreviousNodeText(boldTagElArray[0], '');
    assertHighlightedText(boldTagElArray[0], 'Am');
    assertPreviousNodeText(boldTagElArray[1], 'anda ');
    assertHighlightedText(boldTagElArray[1], 'Annie A');
    assertLastNodeText(node, 'nderson');
  }

  function testMenuFadeDuration() {
    var hideCalled = false;
    var hideAnimCalled = false;
    var showCalled = false;
    var showAnimCalled = false;

    propertyReplacer.set(goog.style, 'setElementShown',  function(el, state) {
      if (state) {
        showCalled = true;
      } else {
        hideCalled = true;
      }
    });

    propertyReplacer.set(goog.fx.dom.FadeInAndShow.prototype, 'play',
        function() {
          showAnimCalled = true;
        });

    propertyReplacer.set(goog.fx.dom.FadeOutAndHide.prototype, 'play',
        function() {
          hideAnimCalled = true;
        });

    // Default behavior does show/hide but not animations.

    renderer.show();
    assertTrue(showCalled);
    assertFalse(showAnimCalled);

    renderer.dismiss();
    assertTrue(hideCalled);
    assertFalse(hideAnimCalled);

    // But animations can be turned on.

    showCalled = false;
    hideCalled = false;
    renderer.setMenuFadeDuration(100);

    renderer.show();
    assertFalse(showCalled);
    assertTrue(showAnimCalled);

    renderer.dismiss();
    assertFalse(hideCalled);
    assertTrue(hideAnimCalled);
  }

  function testAriaTags() {
    renderer.maybeCreateElement_();

    assertNotNull(target);
    assertEvaluatesToFalse('The role should be empty.',
        goog.a11y.aria.getRole(target));
    assertEquals('',
        goog.a11y.aria.getState(target,
            goog.a11y.aria.State.AUTOCOMPLETE));
    assertEquals('',
        goog.a11y.aria.getState(target,
            goog.a11y.aria.State.HASPOPUP));

    renderer.show();
    assertEquals(goog.a11y.aria.Role.COMBOBOX, goog.a11y.aria.getRole(
        target));
    assertEquals('list',
        goog.a11y.aria.getState(target,
            goog.a11y.aria.State.AUTOCOMPLETE));
    assertEquals('true',
        goog.a11y.aria.getState(target,
            goog.a11y.aria.State.HASPOPUP));

    renderer.dismiss();
    assertEquals(goog.a11y.aria.Role.COMBOBOX, goog.a11y.aria.getRole(
        target));
    assertEquals('list',
        goog.a11y.aria.getState(target,
            goog.a11y.aria.State.AUTOCOMPLETE));
    assertEquals('false',
        goog.a11y.aria.getState(target,
            goog.a11y.aria.State.HASPOPUP));
  }

  function testHiliteRowWithDefaultRenderer() {
    renderer.renderRows(rendRows, '');
    renderer.hiliteRow(2);
    assertEquals(2, renderer.hilitedRow_);
    assertTrue(goog.dom.classlist.contains(
        renderer.rowDivs_[2], renderer.activeClassName));
  }

  function testHiliteRowWithCustomRenderer() {
    goog.dispose(renderer);

    // Use a custom renderer that doesn't put the result divs as direct children
    // of this.element_.
    var customRenderer = {
      render: function(renderer, element, rows, token) {
        // Put all of the results into a results holder div that is a child of
        // this.element_.
        var resultsHolder = goog.dom.createDom('div');
        goog.dom.appendChild(element, resultsHolder);
        for (var i = 0, row; row = rows[i]; ++i) {
          var node = renderer.renderRowHtml(row, token);
          goog.dom.appendChild(resultsHolder, node);
        }
      }
    };
    renderer = new goog.ui.ac.Renderer(null, customRenderer);

    // Make sure we can still highlight the row at position 2 even though
    // this.element_.childNodes contains only a single child.
    renderer.renderRows(rendRows, '');
    renderer.hiliteRow(2);
    assertEquals(2, renderer.hilitedRow_);
    assertTrue(goog.dom.classlist.contains(
        renderer.rowDivs_[2], renderer.activeClassName));
  }

  function testReposition() {
    renderer.renderRows(rendRows, '', target);
    var el = renderer.getElement();
    el.style.position = 'absolute';
    el.style.width = '100px';

    renderer.setAutoPosition(true);
    renderer.redraw();

    var rendererOffset = goog.style.getPageOffset(renderer.getElement());
    var rendererSize = goog.style.getSize(renderer.getElement());
    var targetOffset  = goog.style.getPageOffset(target);
    var targetSize = goog.style.getSize(target);

    assertEquals(0 + targetOffset.x, rendererOffset.x);
    assertRoughlyEquals(
        targetOffset.y + targetSize.height, rendererOffset.y, 1);
  }

  function testRepositionWithRightAlign() {
    renderer.renderRows(rendRows, '', target);
    var el = renderer.getElement();
    el.style.position = 'absolute';
    el.style.width = '150px';

    renderer.setAutoPosition(true);
    renderer.setRightAlign(true);
    renderer.redraw();

    var rendererOffset = goog.style.getPageOffset(renderer.getElement());
    var rendererSize = goog.style.getSize(renderer.getElement());
    var targetOffset  = goog.style.getPageOffset(target);
    var targetSize = goog.style.getSize(target);

    assertRoughlyEquals(
        targetOffset.x + targetSize.width,
        rendererOffset.x + rendererSize.width,
        1);
    assertRoughlyEquals(
        targetOffset.y + targetSize.height, rendererOffset.y, 1);
  }

  function testRepositionResizeHeight() {
    renderer = new goog.ui.ac.Renderer(viewport);
    renderer.renderRows(rendRows, '', viewportTarget);
    renderer.setAutoPosition(true);
    renderer.setShowScrollbarsIfTooLarge(true);

    // Stick a huge row in the dropdown element, to make sure it won't fit in the viewport.
    var hugeRow = goog.dom.createDom('div', {style:'height:1000px'});
    goog.dom.appendChild(renderer.getElement(), hugeRow);

    renderer.reposition();

    var rendererOffset = goog.style.getPageOffset(renderer.getElement());
    var rendererSize = goog.style.getSize(renderer.getElement());
    var viewportOffset = goog.style.getPageOffset(viewport);
    var viewportSize = goog.style.getSize(viewport);

    assertEquals(viewportOffset.y + viewportSize.height, rendererSize.height + rendererOffset.y);

    // Remove the huge row, and make sure that the dropdown element gets shrunk.
    renderer.getElement().removeChild(hugeRow);
    renderer.reposition();

    rendererOffset = goog.style.getPageOffset(renderer.getElement());
    rendererSize = goog.style.getSize(renderer.getElement());
    viewportOffset = goog.style.getPageOffset(viewport);
    viewportSize = goog.style.getSize(viewport);

    assertTrue((rendererSize.height + rendererOffset.y) < (viewportOffset.y + viewportSize.height));
  }

  function testHiliteEvent() {
    renderer.renderRows(rendRows, '');

    var hiliteEventFired = false;
    goog.events.listenOnce(renderer,
        goog.ui.ac.AutoComplete.EventType.ROW_HILITE,
        function(e) {
          hiliteEventFired = true;
          assertEquals(e.row, rendRows[1].data);
        });
    renderer.hiliteRow(1);
    assertTrue(hiliteEventFired);

    hiliteEventFired = false;
    goog.events.listenOnce(renderer,
        goog.ui.ac.AutoComplete.EventType.ROW_HILITE,
        function(e) {
          hiliteEventFired = true;
          assertNull(e.row);
        });
    renderer.hiliteRow(rendRows.length); // i.e. out of bounds.
    assertTrue(hiliteEventFired);
  }

  // ------- Helper functions -------
  function assertNumBoldTags (boldTagElArray, expectedNum) {
    assertEquals('Incorrect number of bold tags', expectedNum,
        boldTagElArray.length);
  }

  function assertPreviousNodeText(boldTag, expectedText) {
    var prevNode = boldTag.previousSibling;
    assertEquals('Expected text before the token does not match', expectedText,
        prevNode.nodeValue);
  }

  function assertHighlightedText(boldTag, expectedHighlightedText) {
    assertEquals('Incorrect text bolded', expectedHighlightedText,
        boldTag.innerHTML);
  }

  function assertLastNodeText(node, expectedText) {
    var lastNode = node.lastChild;
    assertEquals('Incorrect text in the last node', expectedText,
        lastNode.nodeValue);
  }

</script>
</body>
</html>
